<template>
  <div class="Order">
    <!-- 定义页面的结构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单" @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div class="content_order">
      <!-- 底部产品展示区域 -->
      <van-tabs v-model="activeName" @click="onlick">
        <van-tab title="全部订单">
          <!-- 全部订单页 -->
          <div class="Allorder">
            <van-card
              v-for="order in orderData"
              :key="order.id"
              :price="order.total"
              :title="order.customer.username"
              :desc="
                order.address.province +
                order.address.city +
                order.address.area +
                order.address.address
              "
              :thumb="order.customer.userFace"
              @click="toDetail(order.id)"
            >
              <template #tags>
                <van-tag plain type="danger">{{ order.status }}</van-tag>
              </template>
              <template #footer>
                <span>
                  {{
                    moment(order.orderTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                >
              </template>
            </van-card>
          </div>
          <van-empty v-show="orderData.length == 0" description="您暂无订单" />
        </van-tab>
        <van-tab title="待派单" name="sendOrder">
          <div class="Allorder">
            <van-card
              v-for="order in second"
              :key="order.id"
              :price="order.total"
              :title="order.customer.username"
              :desc="
                order.address.province +
                order.address.city +
                order.address.area +
                order.address.address
              "
              :thumb="order.customer.userFace"
              @click="toDetail(order.id)"
            >
              <template #tags>
                <van-tag plain type="danger">{{ order.status }}</van-tag>
              </template>
              <template #footer>
                <span>
                  {{
                    moment(order.orderTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                ></template
              >
            </van-card>
            <van-empty
              v-show="orderData.length == 0"
              description="您暂无待派订单"
            />
          </div>
        </van-tab>
        <van-tab title="待接单" name="takeOrder"
          ><!-- 待接单页 -->
          <div class="takeOrder">
            <van-card
              v-for="order in third"
              :key="order.id"
              :price="order.total"
              :title="order.customer.username"
              :desc="
                order.address.province +
                order.address.city +
                order.address.area +
                order.address.address
              "
              :thumb="order.customer.userFace"
              @click="toDetail(order.id)"
              ><template #tags>
                <van-tag plain type="danger">{{
                  order.status
                }}</van-tag> </template
              ><template #footer>
                <span>
                  {{
                    moment(order.orderTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                ></template
              >
            </van-card>
            <van-empty v-show="third.length == 0" description="您暂无待接单" />
          </div>
        </van-tab>
        <van-tab title="待确认" name="comfirmOrder"
          ><!-- 待确认页 -->
          <div class="comfirmOrder">
            <van-card
              v-for="order in forth"
              :key="order.id"
              :price="order.total"
              :title="order.customer.username"
              :desc="
                order.address.province +
                order.address.city +
                order.address.area +
                order.address.address
              "
              :thumb="order.customer.userFace"
              @click="toDetail(order.id)"
            >
              <template #tags>
                <van-tag plain type="danger">{{
                  order.status
                }}</van-tag> </template
              ><template #footer>
                <span>
                  {{
                    moment(order.orderTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                ></template
              >
            </van-card>
            <van-empty
              v-show="forth.length == 0"
              description="您暂无确认订单"
            /></div
        ></van-tab>
        <van-tab title="已完成" name="finishOrder">
          <div class="finishOrder">
            <van-card
              v-for="order in fifth"
              :key="order.id"
              :price="order.total"
              :title="order.customer.username"
              :desc="
                order.address.province +
                order.address.city +
                order.address.area +
                order.address.address
              "
              :thumb="order.customer.userFace"
              @click="toDetail(order.id)"
            >
              <template #tags>
                <van-tag
                  plain
                  type="success
                "
                  >{{ order.status }}</van-tag
                > </template
              ><template #footer>
                <span>
                  {{
                    moment(order.orderTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                ></template
              >
            </van-card>
            <van-empty
              v-show="fifth.length == 0"
              description="您暂无已完成订单"
            />
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入时间函数
let moment = require("moment");
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // 标签页首次展示的标签页
      activeName: "Allorder",
      // 全部订单数组
      Allorder: [],
      second: [],
      third: [],
      forth: [],
      fifth: [],
      list: {
        page: 1,
        pageSize: 99,
      },
    };
  },

  computed: {
    // 全部订单订单数据
    ...mapState("order", ["orderData"]),
    // 查询目前登录账号的id
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    moment,
    // 引入order vuex中的方法
    ...mapActions("order", ["getAllOrderData"]),
    // 引用user vuex的方法
    ...mapActions("user", ["getUserInfo"]),
    // 跳转订单详情页面
    toDetail(id) {
      // 编程式导航路由跳转
      this.$router.push({
        // 路径
        path: "/manager/Detail",
        // 参数传递
        query: { id },
      });
    },
    onlick(name, title) {
      if (title == "待派单") {
        this.second = this.orderData.filter((item) => {
          return item.status == "待派单";
        });
      }
      if (title == "待接单") {
        this.third = this.orderData.filter((item) => {
          return item.status == "待接单";
        });
      }
      if (title == "待确认") {
        this.forth = this.orderData.filter((item) => {
          return item.status == "待确认";
        });
      }
      if (title == "已完成") {
        this.fifth = this.orderData.filter((item) => {
          return item.status == "已完成";
        });
      }
    },
  },
  created() {
    // 自动获取产品数据
    this.getUserInfo().then(() => {
      this.list.customerId = this.userInfo.id;
      this.getAllOrderData(this.list);
      // console.log("-----", this.orderData);
    });
  },
};
</script>

<style scoped>
.van-nav-bar {
  background-image: linear-gradient(-225deg, #d9afd9 0%, #97d9e1 100%);
}
::v-deep .van-nav-bar__title {
  font-size: 20px;
  color: white;
}
.Allorder >>> .van-card__thumb img {
  border-radius: 100px !important;
}
.van-card {
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 10px;
  width: 95%;
  box-shadow: 2px 1px 2px 2px #d9afd9;
}
.comfirmOrder >>> .van-card__thumb img {
  border-radius: 100px !important;
}
.sendOrder >>> .van-card__thumb img {
  border-radius: 100px !important;
}
.finishOrder >>> .van-card__thumb img {
  border-radius: 100px !important;
}
.Allorder >>> .van-card {
  padding: 12px 16px;
}
.takeOrder >>> .van-card img {
  margin: 0 auto;

  width: 95%;
  box-shadow: 2px 1px 2px 2px rgb(#7a7f8c);
  border-radius: 100px !important;
}
.van-card__title {
  font-size: 16px;
  font-family: 楷体;
}
::v-deep .van-tab__title {
  font-size: 16px;
  color: red;
}
</style>